<template>
  <div>
    <PageWrapper contentBackground contentClass="flex" dense contentFullHeight fixedHeight>
      <ImagePreview :imageList="imgList" />
      <BasicTable @register="registerTable">
        <template #id="{ record }">
          <TableAction
            :actions="[
              {
                icon: 'ant-design:picture',
                tooltip: '预览',
                onClick: handlePreview.bind(null, record),
              },
            ]"
          />
        </template>

        <template #toolbar>
          <a-button type="primary" @click="handleReloadCurrent"> 刷新当前页 </a-button>
          <a-button type="primary" @click="handleReload"> 返回第一页 </a-button>
        </template>

        <template #action="{ record }">
          <TableAction
            :actions="[
              {
                icon: 'clarity:note-edit-line',
                tooltip: '审核',
                onClick: handleAudit.bind(null, record),
              },
            ]"
          />
        </template>
      </BasicTable>
    </PageWrapper>
    <AuditModal @register="registerModal" @success="handleSuccess" />
  </div>
</template>
<script lang="ts">
  import { defineComponent } from 'vue';
  import { BasicTable, useTable, TableAction } from '/@/components/Table';
  import { getBasicColumns } from './tableData';
  import { PageWrapper } from '/@/components/Page';
  import { createImgPreview, ImagePreview } from '/@/components/Preview/index';
  import { supplementListApi } from '/@/api/demo/table';
  import { useModal } from '/@/components/Modal';
  import AuditModal from './AuditModal.vue';
  import { useGlobSetting } from '/@/hooks/setting';
  const globSetting = useGlobSetting();
  const imgList: string[] = [];
  export default defineComponent({
    components: { BasicTable, PageWrapper, TableAction, AuditModal, ImagePreview },
    setup() {
      const [registerModal, { openModal }] = useModal();
      const [registerTable, { reload }] = useTable({
        title: '楼栋补充信息',
        api: supplementListApi,
        columns: getBasicColumns(),
        pagination: { pageSize: 10 },
        bordered: true,

        actionColumn: {
          width: 120,
          title: '操作',
          dataIndex: 'action',
          slots: { customRender: 'action' },
        },
      });
      function handleReloadCurrent() {
        reload();
      }

      function handleAudit(record: Recordable) {
        openModal(true, {
          record,
          isUpdate: true,
        });
      }

      function handlePreview(record: Recordable) {
        const onImgLoad = ({ index, url, dom }) => {
          console.log(`第${index + 1}张图片已加载，URL为：${url}`, dom);
        };
        imgList.length = 0;
        if (record.phid) {
          let photos = record.phid.split(',');
          photos.forEach((ele) => {
            if (ele) imgList.push(`${globSetting.apiBaseUrl}/api/v1/images/${ele}`);
          });
        }
        // 可以使用createImgPreview返回的 PreviewActions 来控制预览逻辑，实现类似幻灯片、自动旋转之类的骚操作
        createImgPreview({ imageList: imgList, defaultWidth: 700, rememberState: true, onImgLoad });
      }

      function handleReload() {
        reload({
          page: 1,
        });
      }
      function handleSuccess() {
        reload();
      }
      return {
        imgList,
        registerModal,
        registerTable,
        handleAudit,
        handlePreview,
        handleReloadCurrent,
        handleReload,
        handleSuccess,
      };
    },
  });
</script>
